<style>
    figure,figcaption{
        padding: 0;
        margin: 0;
    }
    .patent .top ul{
        border-radius: 5px;
        width:90%;
        margin: 3vw auto;
        padding: 1vw 0;
        display: block;
        color: #24A1F5;
        overflow: hidden;
    }

    .patent .top ul li{
        float: left;
        width:25%;
        padding: 1.6vw 0;
        border:2px solid #24A1F5;
        border-left: none;
        box-sizing: border-box;
        text-align: center;
    }
    .patent .top ul li:first-child{
         border-left:2px solid #24A1F5;
    }
    .patent .top ul li.active{
        background: #24A1F5;
        color: #fff;
    }
    .patent .list{
        padding-bottom: 50px;
    }
    .patent .list li{
        width:100%;
        border-top: 1px solid #eee;
        clear: both;
        padding: 0;
        border-bottom: 0;
    }
    .patent .list figure{
        width:90%;
        margin: auto;
        padding: 10px 0;
    }
    .patent .list figure img{
        width:13vw;
        float: left;
    }
    .patent .list figure .text{
        margin-left: 3vw;
        float: left;
        margin-bottom: 2vw;
        width:62%;
        overflow: hidden;
    }
    .patent .list figure .text h4{
        padding-bottom: 1vw;
        white-space:nowrap; 
        text-overflow:ellipsis;
        overflow:hidden; 
    }
    .patent .list figure .text p{
        text-align: left;
        color: #999;
        line-height: 5vw;
    }
    .patent .list figure .res{
        float: right;
        margin-top: 5%;
    }

</style>
<template>
    <div class="patent">
       <!-- <div class="top">
           <ul>
               <li :class=" ment==0?'active':''" @click="ment=0">全部</li>
               <li :class=" ment==1?'active':''" @click="ment=1">外观设计</li>
               <li :class=" ment==2?'active':''" @click="ment=2">发明</li>
               <li :class=" ment==3?'active':''" @click="ment=3">实用新型</li>
           </ul>
       </div> -->
        <ul class="list"  v-infinite-scroll="getList" :infinite-scroll-disabled="finished" :infinite-scroll-distance="10">
            <li  v-for="(v,i) in data_list" :key="i" >
                <figure @click="jmp(v.is_import,v.id)">
                    <img src='static/ico_style.png'>
                    <figcaption class="text">
                     <h4 class="txt_overflow">{{v.name}}</h4>
                        <p class="txt_overflow">申请人：{{v.applicant_text}}</p>
                        <p>申请日期：{{v.create_time.substr(0,10)}}</p>
                    </figcaption>
                    <p class="res" style="color:#24A1F5">{{v.client_status_text}}</p>
                </figure>
           </li>
           <div class="clear"></div>
        </ul>
    </div>
</template>
<script>
import { List } from 'vant';
import {mycase} from '@/assets/api'
export default {
    data(){
        return {
            data_list:[],
            loading: false,
            finished: false,
            page:1,
        }
    },
    components:{
        "van-list":List
    },
    methods:{
        jmp(is,id){
            if(is)
                this.$toast.fail('该专利为导入专利，暂无详情可查看')
            else
                this.$router.push({name:'order',query:{case_id:id}})
        },
        getList(){
            if(this.loading || this.finished) return 
            this.loading=true
            mycase({page:this.page++,type:'外观设计',list_rows:20}).then(res=>{
                if(res){
                    this.data_list.push.apply(this.data_list,res.data.data.list)
                    // this.data_list.push(...res.data.data.list)
                    if(res.data.data.pageinfo.total<=this.data_list.length) {
                        this.finished=true
                    }
                }
                this.loading=false
            })
        }
    },

    mounted(){
        this.getList()
    }
}
</script>

